<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!--    引入css 样式-->
  <link rel="stylesheet"  href="/layui/css/layui.css">
  <!--    引入js -->
  <script src="/layui/layui.js"></script>
</head>
<body >
<div style="margin-top: 30px;margin-left: 20%;width: 60%">
  <form class="layui-form layui-form-pane"  action="">
    <div class="layui-form-item">
      <label class="layui-form-label">食物名称：</label>
      <div class="layui-input-block">
        <input type="text" name="fname" required  lay-verify="required" placeholder="请输入食物名称" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">用户姓名：</label>
      <div class="layui-input-block">
        <input type="text" name="name" required  lay-verify="required" placeholder="请输入用户姓名" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">食物价格：</label>
      <div class="layui-input-block">
        <input type="text" name="price" required  lay-verify="required" placeholder="请输入食物价格" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item layui-form-text">
      <label class="layui-form-label">食物描述：</label>
      <div class="layui-input-block">
        <textarea name="info" placeholder="请输入食物描述" class="layui-textarea"></textarea>
      </div>
    </div>
    <div class="layui-form-item layui-form-text">
      <label class="layui-form-label">生产日期：</label>
      <div class="layui-input-block">
        <input type="text" name="cdate" id="date1" placeholder="请输入生产日期" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit lay-filter="formDemo">新增食物</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
      </div>
    </div>
  </form>

</div>

<script>
  //Demo
  layui.use(['form','laydate'], function(){
    var form = layui.form,
            laydate=layui.laydate,
            $=layui.$;
    //执行一个laydate实例
    laydate.render({
      elem: '#date1' //指定元素
    });
    //提交
    form.on('submit(formDemo)', function(data){
      //请求新增接口 Ajax post
      $.post("/api/food/add.do",data.field,function (res){
        //验证接口的返回 是否成功
        if(res.code==0){
          layer.msg("亲，新增成功！");
        }else {
          layer.msg(res.data);
        }
      });
      return false;
    });
  });
</script>
</body>
</html>